<template>
  <div class="personal-index">
    <top-header-one>
      <template #right><logout></logout></template>
      <div class="user">
        <div class="nick-name">{{ currentUser.nickName }}</div>
        <div class="role">{{ currentUser.jobNo }}</div>
      </div>
    </top-header-one>

    <div class="content">
      <ul>
        <li>
          <span>账号:</span>
          <span>{{ currentUser.userName }}</span>
        </li>
        <li>
          <span>姓名:</span>
          <span>{{ currentUser.nickName }}</span>
        </li>
        <li>
          <span>员工编号:</span>
          <span>{{ currentUser.jobNo }}</span>
        </li>
        <li>
          <span>手机号码:</span>
          <span>{{ currentUser.phonenumber }}</span>
        </li>
        <li>
          <span>所属部门:</span>
          <span>{{ currentUser.personnelDept }}</span>
        </li>
        <li>
          <span>创建日期:</span>
          <span>{{ $moment(currentUser.createTime).format("YYYY/MM/DD hh:mm:ss") }}</span>
        </li>
      </ul>

      <div class="other-info">
        <router-link :to="{ name: 'PersonalEditMobile' }">
          <img class="img-1" src="~@/assets/images/bg-3.png" alt="" />
          <span>修改手机号</span>
          <img class="img-2" src="~@/assets/images/more-1.png" alt="" />
        </router-link>
        <router-link :to="{ name: 'PersonalEditPwd' }">
          <img class="img-1" src="~@/assets/images/bg-4.png" alt="" />
          <span>修改密码</span>
          <img class="img-2" src="~@/assets/images/more-1.png" alt="" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import Base from "@/utils/base";
import Logout from "@/components/Logout.vue";
import TopHeaderOne from "@/components/TopHeaderOne.vue";

@Component({
  name: "PersonalIndex",
  components: {
    Logout,
    TopHeaderOne
  }
})
export default class PersonalIndex extends Base {}
</script>

<style lang="less" scoped>
.personal-index {
  color: #596275;

  /deep/.top-bar {
    position: absolute;
    right: 0;
    top: 0;
  }

  .user {
    text-align: center;
    color: white;
  }

  .nick-name {
    font-weight: 450;
    padding-top: 18px;
    font-size: 20px;
    margin-bottom: 2px;
  }

  .content {
    transform: translateY(-12px);
    padding: 0 10px;
    font-size: 13px;

    ul {
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0px 5px 11px 0px rgba(3, 0, 195, 0.05);
      overflow: hidden;
    }

    li {
      display: flex;
      justify-content: space-between;
      margin: 17px;

      span:first-child {
        color: #8b8f98;
      }
    }
  }

  .other-info {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    & > a {
      background: url("~@/assets/images/wave.png") #ffffff center bottom no-repeat;
      border-radius: 5px;
      box-shadow: 0px 6px 9px 0px rgba(3, 0, 195, 0.05);
      height: 52px;
      width: 48.5%;
      background-size: contain;
      display: flex;
      align-items: center;
      color: #596275;
      position: relative;
    }

    .img-1 {
      width: 32px;
      margin-left: 23px;
      margin-right: 15px;
    }

    .img-2 {
      width: 8px;
      position: absolute;
      top: 22px;
      right: 10px;
    }
  }
}
</style>
